<template>
    <div class="login-body">
        <div class="login-panel">
            <div class="login-title">用户登录</div>
            <el-form :model="formData" :rules="rules" ref="formDataRef">
                <el-form-item prop="account">
                    <el-input placeholder="请输入账号" v-model="formData.account" size="large">
                        <template #prefix>
                            <span class="iconfont icon-Account"></span>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" placeholder="请输入密码" v-model="formData.password" size="large">
                        <template #prefix>
                            <span class="iconfont icon-password"></span>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="checkCode">
                    <div class="check-code-panel">
                        <el-input placeholder="请输入验证码" v-model="formData.checkCode" class="input-panel" size="large"
                            @keyup.enter.native="login" />
                        <img class="check-code" :src="checkCodeUrl" @click="refreshCheckCode">
                    </div>

                </el-form-item>
                <el-form-item label="">
                    <el-checkbox v-model="formData.rememberMe" :label="true">记住我</el-checkbox>
                </el-form-item>
                <el-form-item label="">
                    <el-button type="primary" :style="{ width: '100%' }" @click="login">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { getCurrentInstance, ref, reactive } from "vue"
import md5 from 'js-md5'
import VueCookies from 'vue-cookies'
import { useRouter } from "vue-router";
export default {
    setup() {
        const { proxy } = getCurrentInstance();
        const formData = reactive({
            account: '',
            password: '',
            checkCode: ''
        });
        const api = {
            checkCode: "api/checkCode",
            login: "login"
        }
        const checkCodeUrl = ref(api.checkCode);
        const refreshCheckCode = () => {
            // 在这里更新 checkCodeUrl 的值，可以是一个新的 API 请求地址，以触发验证码图片刷新
            checkCodeUrl.value = api.checkCode + "?" + new Date().getTime(); // 示例中使用随机参数来触发刷新
        };
        const rules = {
            account: [{
                required: true,
                message: "请输入用户名",
            }],
            password: [{
                required: true,
                message: "请输入密码",
            }],
            checkCode: [{
                required: true,
                message: "请输入验证码",
            }]
        };
        const init = () => {
            const loginInfo = VueCookies.get("loginInfo");
            if (!loginInfo) {
                return;
            }
            Object.assign(formData, loginInfo)

            // document.onkeydown=(e)=>{
            //     if(e.keyCode !==13 ){
            //         return;
            //     }
            //     login();
            // }
        }
        init();
        const router = useRouter();
        const formDataRef = ref(null);
        const login = () => {
            if (formDataRef.value) {
                formDataRef.value.validate(async (valid) => {
                    if (!valid) {
                        return;
                    }
                    let cookieLoginInfo = VueCookies.get("loginInfo");
                    let cookiePassword = cookieLoginInfo == null ? null : cookieLoginInfo.password
                    if (formData.password !== cookiePassword) {
                        formData.password = md5(formData.password)
                    }
                    let params = {
                        account: formData.account,
                        password: formData.password,
                        checkCode: formData.checkCode,
                    }
                    let result = await proxy.Request({
                        url: api.login,
                        params: params,
                        errorCallback: () => {
                            refreshCheckCode();
                        }
                    });
                    if (!result) {
                        return;
                    }

                    proxy.Message.success("登录成功")
                    setTimeout(() => {
                        router.push("/")
                    }, 1500)


                    // 继续执行登录逻辑...
                    const loginInfo = {
                        account: params.account,
                        password: params.password,
                        rememberMe: formData.rememberMe

                    }

                    VueCookies.set("userInfo", result.data, 0);

                    if (formData.rememberMe) {
                        VueCookies.set("loginInfo", loginInfo, "7d")
                    }
                });
            }
        };
        return {
            formData,
            checkCodeUrl,
            refreshCheckCode,
            rules,
            login,
            formDataRef
        };
    }
};
</script>
<style scoped>
.login-body {

    width: 100%;
    height: calc(100vh);
    background-size: cover;
    background-position: center;
    background-image: url(../assets/background.jpg);

    .login-panel {
        float: right;
        margin-right: 100px;
        width: 350px;
        padding: 20px;
        margin-top: 200px;
        border-radius: 5px;
        background: rgba(255, 255, 255, 0.7);
        box-shadow: 2px 2px 10px #888888;

        .login-title {
            font-size: 20x;
            text-align: center;
            margin-bottom: 10px;
        }

        .check-code-panel {
            width: 100%;
            align-items: center;
            display: flex;

            .input-panel {
                flex: 1;

            }

            .check-code {

                margin-left: 8px;
                cursor: pointer;
            }
        }

    }
}
</style>